/*
 * @Author: Yejing
 * @Date: 2023-06-10 10:31:21
 * @LastEditors: Yejing
 * @LastEditTime: 2023-06-10 10:31:21
 * @Description: desc
 */
<template>
	<view class="modify-page">
		<!-- 头部 -->
		<c-layout>
			<c-navigation-bar :title="search.title" :navType='search.navType' :navPlaceholder='search.navPlaceholder'
				:navThmen='search.navThmen' @focusEvent='focusEvent' @switchSvgEvent='switchSvgEvent'>
			</c-navigation-bar>
			
			<!-- 修改 -->
			<view class="container-box form-modify">
				<!-- <view class="input-box" v-for="(item,index) in modifyInputList" :key="item.val">
					<form action="">
						<titleInput v-model.trim="modifyData[item.key]" :valKey="item.key"
							:type="item.val ==='Password'?'password':'text'" :title="item.val">
						</titleInput>
					</form>
				</view> -->
				<u-form :model="modifyData" ref="uForm">
					<u-form-item :label="$t('modify.oldPassword')" prop="oldPassword" labelPosition="top">
						<u-input v-model="modifyData.oldPassword" type="password" placeholder='' />
					</u-form-item>
					<u-form-item :label="$t('modify.newPassword')" prop="password" labelPosition="top">
						<u-input v-model="modifyData.password" type="password" placeholder='' />
					</u-form-item>
					<u-form-item :label="$t('modify.againPassword')" prop="rePassword" labelPosition="top">
						<u-input v-model="modifyData.rePassword" type="password" placeholder='' />
					</u-form-item>
				</u-form>
			</view>
			
			<view class="bootom">
				<u-button @click="modifyClick" type="primary">
					{{$t('modify.affirm')}}
				</u-button>
			</view>
		</c-layout>
		

		<!-- 模态框 -->
		<modal :show='modal.show' :content='modal.content' @confirmClick='confirmClick' @cancelClick='cancelClick'>
		</modal>

	</view>
</template>

<script>
	export default {
		data() {
			var validatePass = (rule, value, callback) => {
				var reg = /^\d{6}$/;
				if (!reg.test(value)) {

					callback(new Error(this.$t('modify.rulesList.message2')));
				} else {
					// if (this.form.confirmPwd !== '') {
					// 	// this.$refs.uForm.validateField('confirmPwd');
					// 	callback(new Error('请输入新密码'));
					// }
					callback();
				}
			};

			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error(this.$t('modify.placeinputpass')));
				} else if (value !== this.modifyData.password) {
					callback(new Error(this.$t('modify.passwordNosee')));
				} else {
					callback();
				}
			};
			return {
				//搜索
				search: {
					navThmen: 'line',
					navPlaceholder: 'Donate for',
					navType: 'navBackTitle',
					title: this.$t('modify.title')
				},

				// 修改输入框组
				modifyInputList: [{
						val: this.$t('modify.oldPassword'),
						key: 'oldPassword',
					},
					{
						val: this.$t('modify.newPassword'),
						key: 'password',
					},
					{
						val: this.$t('modify.againPassword'),
						key: 'rePassword',
					}
				],
				// 数据
				modifyData: {
					oldPassword: '',
					password: '',
					rePassword: '',
				},
				rules: {
					password: [
						{ required: true, message: this.$t('modify.rulesList.message'), trigger: 'blur' },
						{ validator: validatePass, trigger: 'blur' }
					],
					oldPassword: [
						{ required: true, message:this.$t('modify.rulesList.message'), trigger: 'blur' },
					],
					rePassword: [
						{ required: true, message: this.$t('modify.rulesList.message'), trigger: 'blur' },
						{ validator: validatePass2, trigger: 'blur', required: true }
					]
				},
				modal: {
					show: false,
					content: ''
				},
			}
		},
		onLoad() {


		},
		methods: {
			modifyClick() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$u.post('/app/shop/password/set', {
							password: this.modifyData.password,
							oldPassword: this.modifyData.oldPassword,
							
						}).then(res => {
							this.$u.toast(res.msg)
							setTimeout(()=>{
								uni.navigateTo({
									url: '/pages/storyType/storeManagement/storeInformation',
									"animationType": "slide-in-right",
									"animationDuration": 300
								})
							},700)
							
						})
					} else {
						console.log('验证失败');
					}
				});
			},


			confirmClick() {

			},

			cancelClick() {
				this.modal.show = false
			}

		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style lang="scss">
	.modify-page {
		.input-box {
			margin-bottom: 40rpx;
		}

		.bootom {
			position: absolute;
			bottom: 60rpx;
			width: 90%;
			left: 50%;
			transform: translateX(-50%);

			.u-btn {
				padding: 30rpx;
			}
		}
	}
</style>
